<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>房间管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .btn-hover {
            transition: all 0.3s ease;
        }

        .hidden {
            display: none;
        }

        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
        }

        .page-info {
            font-size: 0.875rem;
            color: #6b7280;
        }

        .pagination-buttons button {
            padding: 0.375rem 0.75rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.375rem;
            background-color: #fff;
            color: #3b4252;
            cursor: pointer;
            transition: background-color 0.2s, border-color 0.2s;
        }

        .pagination-buttons button.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }

        .pagination-buttons button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div id="page-rooms" class="page-content hidden">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
        <div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-dark">房间管理</h2>
            <p class="text-gray-500">查看和管理所有房间信息</p>
        </div>
        <div class="mt-4 md:mt-0 flex gap-3">
            <button id="add-room-btn"
                    class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors btn-hover">
                <i class="fa-solid fa-plus mr-2"></i>添加房间
            </button>
        </div>
    </div>

    <!-- 筛选器 -->
    <div class="bg-white rounded-xl p-4 card-shadow mb-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">房间号</label>
                <input type="text" placeholder="搜索房间号" id="search-room-number"
                       class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">房间类型</label>
                <select id="filter-room-type"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                    <option value="">全部</option>
                    <option value="1">标准单人间</option>
                    <option value="2">标准双人间</option>
                    <option value="3">豪华单人间</option>
                    <option value="4">豪华双人间</option>
                    <option value="5">商务套房</option>
                    <option value="6">总统套房</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                <select id="filter-status"
                        class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                    <option value="">全部</option>
                    <option value="1">可用</option>
                    <option value="2">已入住</option>
                    <option value="3">已预定</option>
                    <option value="4">维护中</option>
                </select>
            </div>
            <div class="flex items-end">
                <button id="filter-room-btn"
                        class="w-full px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors">
                    <i class="fa-solid fa-search mr-2"></i>搜索
                </button>
            </div>
        </div>
    </div>

    <!-- 房间列表 -->
    <div class="bg-white rounded-xl card-shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead>
                <tr class="bg-gray-50 text-left text-gray-500 text-sm">
                    <th class="px-6 py-3 font-medium">房间号</th>
                    <th class="px-6 py-3 font-medium">类型</th>
                    <th class="px-6 py-3 font-medium">价格</th>
                    <th class="px-6 py-3 font-medium">状态</th>
                    <th class="px-6 py-3 font-medium">面积</th>
                    <th class="px-6 py-3 font-medium">床型</th>
                    <th class="px-6 py-3 font-medium">操作</th>
                </tr>
                </thead>
                <tbody id="rooms-table-body"></tbody>
            </table>
        </div>
    </div>

    <!-- 分页条 -->
    <div class="pagination-container" id="room-pagination-container">
        <div class="page-info" id="room-page-info"></div>
        <div class="pagination-buttons" id="room-pagination-buttons"></div>
    </div>
</div>

<!-- 引用房间模态框模板（假设为独立文件） -->
{% include 'room-modal.html' %}

<script src="/static/js/room.js"></script>
</body>
</html>